Вход

Просмотр полной версии : не могу понять, почему не работает событие движение мыши


grydni4ok_01
25.05.2020, 11:53
Добрый день. Пытаюсь написать класс, который будет выводить подсказку у html-элементов, у которых есть атрибут data-tooltip. Сама подсказка выводится, но хочу чтобы подсказка двигалась за мышью, и не как не могу повесить обработчик чтобы он корректно работал

class Tooltip{
static instance = null;

constructor(){
if (Tooltip.instance) {
return Tooltip.instance;
}

let div = null;

this.initLisener();

Tooltip.instance = this;
}

initLisener(){
document.addEventListener('mouseover', this.onMouseOver);
document.addEventListener('mouseout', this.onMouseOut);
}

onMouseOver(event){
if (!event.target.closest('[data-tooltip]')) { return; }

let elem = event.target.closest('[data-tooltip]');

this.div = document.createElement('div');
this.div.className = 'tooltip';
this.div.style.top = `${event.clientY + 10}px`;
this.div.style.left = `${event.clientX + 5}px`;
this.div.innerHTML = elem.dataset.tooltip;
document.body.append(this.div);

document.addEventListener('mousemove', this.onMouseMove);
}

onMouseMove(event) {
this.div.style.top = `${event.clientY + 10}px`;
this.div.style.left = `${event.clientX + 5}px`;
}


onMouseOut(event){
if (this.div) {
this.div.remove();
}
}

}

let tooltip = new Tooltip();

Вешаю обработчик document.addEventListener('mousemove', this.onMouseMove); а он не работает, кто может подсказать почему?

рони
25.05.2020, 14:39
grydni4ok_01,
17,18,33 .bind(this)

grydni4ok_01
25.05.2020, 18:47
да, спасибо большое, помогло, все работает